import React from 'react'
import {connect} from 'react-redux'
import { Form, Select, message, Switch, Button, Input } from 'antd';
import {messages} from "share/common";
import interfaceService from "containers/financial-account/interface-definition/interface-service";
const FormItem = Form.Item;
const Option = Select.Option;
const TextArea = Input.TextArea;
const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 14},
};

class sceneRule extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      record: {},
      saveLoading: false,
      interfaceRecord: {}
    }
  }

  componentWillMount() {

  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.showSlideFrame === this.props.showSlideFrame)
      return;
    if (!nextProps.showSlideFrame) {
      this.props.form.resetFields();
      return !1;
    }
    this.props.form.resetFields();
    this.setState({
      record: nextProps.editRecord,
      interfaceRecord: nextProps.interfaceRecord
    });
  }

  handleSave = () => {
    this.props.form.validateFieldsAndScroll((err,values) => {
      if(!err){
        const { record, interfaceRecord } = this.state;
        const { user, tenant } = this.props;
        record.id && (values.id = record.id);
        values.tenantId = tenant.id;
        values.setOfBooksId = interfaceRecord.setOfBooksId;
        values.functionId = interfaceRecord.id;
        let name = Object.keys(record).length > 0 ? 'updateScene' : 'addScene';
        this.setState({saveLoading: true});
        interfaceService[name](values,user.userOID).then(() => {
          this.setState({saveLoading: false});
          this.props.close(true);
        }).catch(e => {
          this.setState({saveLoading: false});
          message.error(e.response.data.message);
        })
      }
    })
  };

  render(){
    const { record, saveLoading } = this.state;
    const { getFieldDecorator } = this.props.form;
    return(
      <div>
        <Form style={{marginTop:'10px'}}>
          <FormItem label={messages('financial-account.key43')/*场景编码*/} {...formItemLayout}>
            {getFieldDecorator('sceneCode', {
              rules: [{
                required: true, message: messages('common.please.enter')/*请输入*/,
              }],
              initialValue: record.sceneCode
            })(
              <Input placeholder={messages('common.please.input')/*请输入*/} disabled={record.sceneCode ? true :false}/>
            )}
          </FormItem>
          <FormItem label={messages('financial-account.key44')/*场景名称*/} {...formItemLayout}>
            {getFieldDecorator('sceneName', {
              rules: [{
                required: true, message: messages('common.please.select')/*请选择*/,
              }],
              initialValue: record.sceneName
            })(
              <Input placeholder={messages('common.please.input')/*请输入*/}/>
            )}
          </FormItem>
          <FormItem label={messages('financial-account.key45')/*场景说明*/} {...formItemLayout}>
            {getFieldDecorator('comment', {
              initialValue: record.comment
            })(
              <TextArea rows={4} placeholder={messages('common.please.input')/*请输入*/} style={{resize:'none'}}/>
            )}
          </FormItem>
          <FormItem label={messages('financial-account.key5')/*是否预置*/} {...formItemLayout}>
            {getFieldDecorator('isDefault', {
              rules: [{
                required: true, message: messages('common.please.select')/*请选择*/,
              }],
              initialValue: record.isDefault ? String(record.isDefault) : 'false'
            })(
              <Select disabled>
                <Option key={'true'}>{messages('common.yes')/*是*/}</Option>
                <Option key={'false'}>{messages('common.no')/*否*/}</Option>
              </Select>
            )}
          </FormItem>
          <FormItem label={messages('common.column.status')/*状态*/} {...formItemLayout}>
            {getFieldDecorator('isEnable',{
              initialValue: typeof record.isEnable === "boolean" ? record.isEnable : true,
              valuePropName: 'checked'
            })(
              <Switch/>
            )}
          </FormItem>
        </Form>
        <div className="footer-operate" style={{backgroundColor:'#ffffff',left:'0px'}}>
          <Button type="primary"  onClick={this.handleSave} style={{margin:'0px 10px'}} loading={saveLoading}>{messages('common.save')/*保存*/}</Button>
          <Button onClick={this.props.close}>{messages('common.cancel')/*取消*/}</Button>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state){
  return {
    user: state.login.user,
    tenant: state.login.tenant
  }
}

const wrappedSceneRule = Form.create()(sceneRule);
export default connect(mapStateToProps)(wrappedSceneRule);
